<template>
    <div id="search">
        <div class="head">
            <span class="iconfont" onclick="javascript :history.go(-1);">&#xe602;</span>
            <form action="">
                <input type="text" placeholder="搜索品牌、品类关键词">
            </form>
            <button class="f_right">搜索</button>
        </div>

        <!--搜索过的标签-->
        <div class="search-box w">
            <span v-for="(item,index) in searchList" :key="index">{{ item }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data() {
            return {
                searchList: [
                    "小吃", "中餐", "酸菜鱼", "甜点", "麻辣烫", "中餐", "面食", "甜点", "辣骨饭"
                ]
            }
        },

    }
</script>

<style scoped lang="less">
    #search {
        /* 头部 */

        .head {
            //width: 100%;
            width: 3.325rem;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 0.5rem;
            background-color: #fff;
            z-index: 999;

            span {
                position: absolute;
                top: 0.15rem;
                left: 0;
                z-index: 99999;
            }

            form {
                position: absolute;
                top: .045rem;
                left: 0;
                padding-left: .33rem;
                padding-right: .61rem;

                input {
                    width: 2.595rem;
                    height: .35rem;
                    background-color: rgba(200, 200, 200, .2);
                    border-radius: 35px;
                    padding-left: .235rem;
                    border: 0;
                }

                input::-webkit-input-placeholder {
                    /* placeholder颜色  */
                    color: #666;
                    /* placeholder字体大小  */
                    font-size: 12px;
                    /* placeholder位置  */
                    text-align: left;
                    padding-left: 9px;
                }
            }

            button {
                margin-top: .1rem;
                margin-right: -0.05rem;
                border: none;
                background-color: transparent;
                font-size: 15px;
                color: #333;
            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: -0.21rem;
                width: 0.22rem;
                height: 100%;
                background-color: #fff;
                z-index: 9999;
            }

            &::before {
                content: "";
                position: absolute;
                top: 0;
                right: -0.21rem;
                width: 0.22rem;
                height: 100%;
                background-color: #fff;
                z-index: 9999;
            }
        }

        .search-box {
            margin-top: .655rem;
            padding-right: .785rem;

            span {
                display: inline-block;
                color: #fff;
                padding: 0 .11rem;
                height: .25rem;
                line-height: .25rem;
                text-align: center;
                border-radius: 1.25rem;
                margin-right: .15rem;
                margin-bottom: .125rem;

                &:nth-of-type(2n+1) {
                    background-color: #37c4ff;
                }

                &:nth-of-type(2n+2) {
                    background-color: #ff771c;
                }

                &:nth-of-type(2n+3) {
                    background-color: #ff377e;
                }

                &:nth-of-type(2n+4) {
                    background-color: #f9c50f;
                }

                &:nth-of-type(2n+5) {
                    background-color: #ff3737;
                }
            }
        }
    }
</style>
